<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1">
        222
        <div id="box2">111</div>
    </div>
</body>
<!-- <script src="./leetcode/treeNode.js"></script> -->
<script src="./sendRequest.js"></script>
<script>

    let dom1 = document.querySelector("#box1")
    let dom2 = document.querySelector("#box2")
    let dom3 = document.querySelector('html')
    console.log(dom1, dom2, dom3);
    // dom1.addEventListener('click', () => {
    //     console.log('dom1');
    // })
    // dom2.addEventListener('click', () => {
    //     console.log('dom2');
    // })
    // dom3.addEventListener('click', () => {
    //     console.log('dom3');
    // })
    bindEvent(dom3, 'click', '#box2', () => { console.log(3333333333) })
    function bindEvent(dom, event, selector, callback) {
        console.log(selector);
        if (callback == null) {
            callback = selector
            selector = null
        }
        dom.addEventListener(event, function (e) {
            const target = e.target
            if (selector) {
                if (target.matches(selector)) {
                    callback.call(target, e)
                }
            } else {
                callback.call(target, e)
            }
        })
    }
</script>

</html>